<template>
  <div class="my-order-box" v-loading="loading">
    <h3>我的订购</h3>
    <div class="order-box">
      <div class="order-item" v-for="(item,key) in orderlist" :key="`orderItem-${key}`">
        <order-item :orderItem="item"></order-item>
      </div>
    </div>
    <div class="pagination-top-line"></div>
    <div class="pagination-box">
      <el-pagination
              background
              layout="prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              @prev-click = "prePage"
              @next-click = "nextPage"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="persizes"
              :total = "total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import OrderItem from "@/components/OrderItem.vue";
export default {
  components: {
    OrderItem,
  },
  data(){
    return {
        loading: false,
        currentPage: 1,
        total: 1,
        persizes: 5,
        orderlist: [],
    }
  },
  created() {
      this.list();
  },
  methods:{
      list(){
        console.log(this.currentPage)
          let _this = this;
          _this.loading = true;
          this.$http.get('/order/list',{
            params:{
              pageNum: _this.currentPage,
              pageSize:_this.persizes
            }
          }).then(function (response) {
              _this.orderlist = response.data.list;
              _this.total = response.data.total;
              _this.loading = false;
          })
      },
    handleSizeChange(val) {
      this.persizes = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.list();
    },
    prePage() {
      this.list();
    },
    nextPage() {
      this.list();
    },
  }
};
</script>

<style lang="scss" scoped>
.my-order-box {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  h3 {
    text-align: left;
    font-weight: 200;
    margin-bottom: 20px;
    height: 28px;
    font-size: 28px;
    font-weight: normal;
    line-height: 28px;
    color: #757575;
  }
  .order-item {
    margin: 14px 0;
  }
}
</style>